<!-- MainLayout.vue -->
<template>
  <div id="app">
    <!-- 背景飘落物特效 -->
    <div v-for="item of 150" :key="item" class="fallingDebris"></div>
    <Navbar id="navbar" />
    <div id="main-content"><router-view /></div>

    <Footer />
  </div>
</template>

<script>
import Navbar from "@/components/NavbarComponent.vue";
import Footer from "@/components/FooterComponent.vue";

export default {
  components: {
    Navbar,
    Footer,
  },
};
</script>
<script setup>
import { onMounted } from "vue";
onMounted(() => {
  const adjustMainContentPadding = () => {
    // 判断当前页是否存在navbar，如不存在则直接跳出函数
    if (!document.getElementById("navbar")) return;
    const navbar = document.getElementById("navbar");
    const mainContent = document.getElementById("main-content");

    // 获取导航条的高度
    const navbarHeight = navbar.offsetHeight;

    // 设置主要内容区的顶部内边距
    mainContent.style.paddingTop = `${navbarHeight + 10}px`;
  };
  // 页面初始时调用
  adjustMainContentPadding();
  // 在页面加载时和窗口大小改变时调用此函数
  window.addEventListener("load", adjustMainContentPadding);
  window.addEventListener("resize", adjustMainContentPadding);
});
</script>
<style scoped>
</style><!-- 背景飘落物特效 -->
<style lang="scss">
@use "sass:math";
.fallingDebris {
  --size: 5vw;
  width: var(--size);
  height: var(--size);
  background: url("@/assets/images/peach-blossom.png") no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: -5vh;
  z-index: 1;
}

@keyframes fallingDebrisfall {
  100% {
    transform: translate3d(var(--end), 100vh, 0);
  }
}

@for $i from 0 through 500 {
  .fallingDebris:nth-child(#{$i}) {
    //每个飘落物的大小math
    --size: #{math.random(10) * 0.12}vw;
    //飘落物移动目标点 -70后是负数 这样飘落物会向左下方飘落
    --end: #{math.random(20) - 70}vw;
    left: #{math.random(150)}vw;
    animation: fallingDebrisfall #{5 + math.random(8)}s linear infinite;
    animation-delay: -#{math.random(10)}s;
  }
}
</style>


